<template>
  <div id="datasource">
    <!-- 搜索栏 -->
    <el-card>
      <el-input v-model="condition.name" placeholder="请输入系统名称" clearable></el-input>
      <el-select v-model="condition.dataType" placeholder="请选择数据库类型" clearable>
        <el-option
          v-for="item in dataTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="condition.dataName" placeholder="请输入数据库名" clearable></el-input>

      <el-button icon="el-icon-search" round @click="search">搜索</el-button>
      <el-button type="info" @click="handlerReset">重置</el-button>
      <el-button type="primary" @click="handlerAdd">添加</el-button>
      <el-button type="danger" @click="handlerDel">删除</el-button>
      <!-- {{ condition }} -->
      <!-- <el-button type="primary" icon="el-icon-plus" circle @click="handleAdd" style="float: right; margin-right: 10px;"></el-button> -->
    </el-card>
    <!-- 用户列表 -->
    <el-card>
      <el-table
        :data="tableData"
        stripe
        border
        height="400"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          fixed="left"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="系统名称"
          width="150">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="handlerEdit(scope.row)" style="text-decoration: underline;">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="dataType"
          label="数据库类型"
          width="150">
        </el-table-column>
        <el-table-column
          prop="url"
          label="数据库IP"
          width="200">
        </el-table-column>
        <el-table-column
          prop="dataName"
          label="数据库名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="port"
          label="端口">
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 弹出框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="850px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="系统名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库类型" prop="dataType">
              <el-select v-model="form.dataType" placeholder="请选择数据库类型">
                <el-option
                  v-for="item in dataTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据库IP" prop="url">
              <el-input v-model="form.url"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库名" prop="dataName">
              <el-input v-model="form.dataName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input v-model="form.port"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="note">
              <el-input v-model="form.note"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="dialogTitle == '添加数据源'">
        <el-button type="warning" @click="testConn">测试连接</el-button>
        <el-button type="primary" @click="saveConn">保存</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-show="dialogTitle == '修改数据源'">
        <el-button type="primary" @click="saveConn">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/common'
  import connect from '@/api/connect'
  export default {
    name: 'Datasource',
    data() {
      return {
        // 分页数据
        pageNum: 1,
        pageSize: 10,
        total: 0,
        // 查询条件
        condition: {
          
        },
        // 数据库类型下拉列表
        dataTypeOptions: [],
        // 用户列表
        tableData: [],
        // 控制添加用户对话框是否显示
        dialogVisible: false,
        // 弹出框标题
        dialogTitle: '',
        // 弹出框表单数据
        form: {},
        // 弹出框表单校验规则
        rules: {},
        delIds: []
      }
    },
    methods: {
      // 搜索按钮 输入查询条件后，不点击搜索按钮，直接选择页码，会有bug
      search() {
        this.pageNum = 1
        this.getConnPage()
      },
      // 改变每页显示记录数
      handleSizeChange(val) {
        this.pageSize = val
        this.pageNum = 1
        this.getConnPage()
      },
      // 改变页码
      handleCurrentChange(val) {
        this.pageNum = val
        this.getConnPage()
      },
      // 分页条件查询数据源列表
      getConnPage() {
        connect.getConnPage(this.condition, this.pageNum, this.pageSize).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total
          }
        })
      },
      // 重置按钮点击事件
      handlerReset() {
        // 重置搜索条件
        this.condition = this.$options.data()
        this.getConnPage()
      },
      // 添加按钮点击事件
      handlerAdd() {
        // 重置form表单
        this.form = this.$options.data()
        this.dialogVisible = true
        this.dialogTitle = '添加数据源'
      },
      // 添加数据源中 测试连接按钮点击事件
      testConn() {
        connect.testConn(this.form).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success("连接成功")
          }
        })
      },
      // 添加或修改数据源
      saveConn() {
        connect.saveConn(this.form).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.$message.success(this.dialogTitle + "成功")
            this.dialogVisible = false
            this.getConnPage()
          }
        })
      },
      // 点击表格中的系统名称，会有弹出框，显示对应数据
      handlerEdit(row) {
        this.dialogVisible = true
        this.dialogTitle = '修改数据源'
        this.form = row
      },
      handlerDel() {
        if (this.delIds.length == 1) {
          // 如果只选中一行，单条删除；多行则是批量删除
          connect.delConn(this.delIds[0]).then(res => {
            if (res.code == 200) {
              this.$message.success("单条删除成功")
              this.getConnPage()
            }
          })
        } else {
          connect.batchDelConn(this.delIds).then(res => {
            if (res.code == 200) {
              this.$message.success("批量删除成功")
              this.getConnPage()
            }
          })
        }
        
      },
      // 确认删除点击事件
      confirmDel(row) {
        // user.deleteUser(row).then(res => {
        //   if (res.code == 200) {
        //     this.$message.success("操作成功")
        //   } else {
        //     this.$message.error("操作失败")
        //   }
        // })
        console.log(row)
      },
      handleSelectionChange(val) {
        // console.log(val)
        // 表格选中获取的是一个选中数据，所以要先将选中ids设为空数组，避免重复添加
        this.delIds = []
        // 使用map遍历选中行，将选中行的id添加到一个数组中
        val.map(item => {
          this.delIds.push(item.id)
        })
        console.log(this.delIds)
      }
    },
    mounted() {
      // 在页面加载时查询数据源列表
      this.getConnPage()
      // 加载数据库类型选择器数据
      common.getDataType().then(res => {
        this.dataTypeOptions = res.data;
        // console.log(res);
      })
    },
  }
</script>

<style lang="scss" scoped>
  .el-card {
    .el-input {
      width: 160px;
      margin-right: 25px;
    }
    .el-select {
      width: 160px;
      margin-right: 25px;
    }
    .el-button {
      margin-right: 15px;
    }
  }
  .el-dialog {
    .el-form {
      .el-form-item {
        .el-input {
          width: 240px;
        }
      }
    }
    
    .el-dialog__footer {
      .dialog-footer {
        .el-button:first-child {
          margin-right: 80px;
        }
      }
    }
    // ::v-deep .el-dialog__footer {
    //   text-align: center;
    // }
  }
</style>

<style scoped>
  /* scss使用::v-deep样式穿透无效，因此直接在css中使用>>>样式穿透 */
  >>>.el-dialog__body {
    padding-bottom: 15px;
  }
  >>>.el-dialog__footer {
    text-align: center;
    padding-bottom: 50px;
  }
</style>
